<template>
  <img
          :src=imgUrl
          :id="imgSnid"
          style="width:100%;display: inline-block "
          :style="{'height': heightStyle}"
          alt="">
</template>
<script>
  export default {
    name: 'MyVideo3',
    props: {
      imgSn: String,
      page: Number,
      imgSn2: String,
      heightStyle: String,
      indexItem: [String, Number]
    },
    data () {
      return {
        imgUrl: '',
        ws: null,
        imgSnid: '',
        wss: []
      }
    },
    mounted () {
      this.imgSnid = this.imgSn
      this.imgUrlComputed()
    },
    methods: {
      getUrl (sn) {
        const crypto = require('crypto')
        // eslint-disable-next-line no-unused-vars
        const https = require('https')

        // var sn = '615d9801-bc2485e4' // 设备SN
        // var sn = '8e5f3620-a9e28248' // 设备SN
        var port = 9080 // 要映射的端口

        // 只能查看属于你的设备，所以需要用AccessKey签名进行身份认证，请在https:://www.vzicar.com里创建AccessKey
        // eslint-disable-next-line camelcase
        var accesskey_id = 'GatQljhq22645eRVYPaG7LttgGkQ4YBI' // AccessKeyID
        // eslint-disable-next-line camelcase
        var accesskey_secret = '2TVinxAqh97RqKfmyToGFeHjqWMGyUsG' // AccessKeySecret

        var expires = parseInt(new Date().getTime() / 1000) + 7200
        var resource = `/v2/stp/user/devices/pdns?port=${port}&sn=${sn}&type=text`
        var canonicalString = `GET\n\n\n${expires}\n${resource}`
        var signature = crypto
            .createHmac('sha1', accesskey_secret)
            .update(canonicalString)
            .digest('base64')
        signature = encodeURIComponent(signature)
        // eslint-disable-next-line camelcase
        var url = `https://www.vzicar.com${resource}&accesskey_id=${accesskey_id}&expires=${expires}&signature=${signature}`
          console.log('视频url:', url)
        var imgUrl = ''
        // eslint-disable-next-line camelcase
        $.ajax({
          // eslint-disable-next-line camelcase
          url: url,
          type: 'get',
          async: false,
          success: function (result) {
            imgUrl = result
          },
          error: function (result) {
            console.log('result.error=', result)
          }
        })
        return imgUrl
      },
      imgUrlComputed () {
        // 链接服务端
        var id = this.imgSnid
        var ip = this.getUrl(this.imgSn)
          console.log('视频id:', id)
          console.log('视频ip:', ip)
        // console.log('ip')
        this.ws = new WebSocket('ws://' + ip + '/ws')
        // 配置客户端处理消息的回调方法
        this.ws.onmessage = function (event) {
          // var end_time = new Date().getTime()
          var reader = new FileReader()
          reader.onload = function (eve) {
            // 判断文件是否读取完成
            if (eve.target.readyState === FileReader.DONE) {
              this.imgUrl = this.result
              var img = document.getElementById(id)
              if (img != null) {
                img.src = this.result
              }
              return this.result
            }
          }
          reader.readAsDataURL(event.data)
        }
      }
    },
    beforeDestroy () {
      this.ws.close()
    }
  }
</script>
